<template>
  <div class="my">
    <div class="top">
      <img class="avatar" :src="userInfo.avatar" alt="" />
      <span class="name">{{ userInfo.username }}</span>
    </div>
    <div class="middle">
      <van-grid :column-num="3">
        <van-grid-item icon="clock-o" text="历史记录" to="/" />
        <van-grid-item icon="bookmark-o" text="我的收藏" to="/collect" />
        <van-grid-item icon="thumb-circle-o" text="我的点赞" to="/like" />
      </van-grid>
    </div>
    <div class="bottom">
      <van-cell-group>
        <van-cell title="推荐分享" is-link></van-cell>
        <van-cell title="意见反馈" is-link></van-cell>
        <van-cell title="关于我们" is-link></van-cell>
        <van-cell title="退出登录" is-link @click="exit"></van-cell>
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import { userCurrentUser } from '@/api/user.js'
import { removeToken } from '@/utils/locale'
export default {
  data () {
    return {
      userInfo: ''
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await userCurrentUser()
      this.userInfo = res.data
      console.log(res)
    },
    exit () {
      // 删除token
      removeToken()
      // 跳转到登陆页
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="less" scoped>
.my {
  padding: 15px;
  height: 100vh;
  background-color: #f5f5f5;
  .top {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #fff;
      margin-right: 30px;
    }
    .name {
      font-size: 20px;
      font-weight: 500;
    }
  }
  .bottom {
    margin-top: 30px;
  }
}
</style>
